<template>
	<view class="Personal">
		<!-- 		<view class="personal-back">
			<image class="back-img" src="@/static/ks/back.png" mode=""></image>
			<u-button type="primary" text="确定" @click="onScrollTop"></u-button>
		</view> -->
		<image class="back-img" :src="`${OnlineStatic}back.png`" mode=""></image>
		<!-- 表面的 -->
		<!-- 		<scroll-view class="scroll-view pof" :class="{'scroll-top': scrollTop}" refresher-default-style="none"
			:refresher-triggered="refresherTriggered" refresher-enabled @refresherpulling="dropdownRefresh()"
			@refresherrefresh="onRefresherrefresh()"> -->
		<view class="scroll-view">
			<!-- 个人信息 -->
			<view class="surface">
				<view class="infos dis-cen" @click="onJumpPage('infoSetup')">
					<view class="surface-infos dis-ali">
						<image class="info-img" v-if="userInfo.headImg" :src="userInfo.headImg" mode=""></image>
						<image class="info-img" v-else src="@/static/icons/txs.png" mode=""></image>
						<text
							class="font-weight-600 color-f size-32">{{tokenBool? userInfo.nickName || '-':'请登录'}}</text>
					</view>
					<view class="setup f-background radius100 dis">
						<image class="setup-img" src="@/static/icons/sz.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 统计 -->
			<view class="statistics f-background margin-bottom-20">
				<view class="statistics-title" @click="onJumpPage('beansList')">
					<!-- <view class=""> -->
					<view class="color7b dis-ali">
						<text class="size-26">便利豆 (颗)</text>
						<text class="iconfont icon-right-1-copy size-26 margin-left-12 por"></text>
					</view>
					<view class="color84 font-weight-600 size-56 price-font">
						{{!tokenBool? '-' : (userInfo.beanAmount || 0).toFixed(1) }}
					</view>
					<!-- </view> -->
					<!-- 					<view class="tiao"></view>
					<view class="text-align">
						<view class="color84 font-weight-600 size-46 margin-bottom-24 price-font">
							{{!tokenBool? '-' : 0}}
						</view>
						<view class="color7b size-28">优惠券 (张)</view>
					</view> -->
					<!-- 				<view class="tiao"></view>
					<view class="text-align">
						<view class="color84 font-weight-600 size-46 margin-bottom-24 price-font">
							{{!tokenBool? '-' : userInfo.walletAmount || 0}}
						</view>
						<view class="color7b size-28">红包 (元)</view>
					</view> -->
				</view>
				<view class="service-order">
					<view class="text-align order-padding" @click="onOrderRedirection(1)">
						<image src="@/static/icons/fwdd.png" class="order-icon margin-bottom-24" mode="widthFix">
						</image>
						<view class="font-weight-400 size-30">跑腿服务</view>
					</view>
					<view class="text-align order-padding" @click="onOrderRedirection(2)">
						<image src="@/static/icons/spdd.png" class="order-icon margin-bottom-24" mode="widthFix">
						</image>
						<view class="font-weight-400 size-30">消费买单</view>
					</view>
					<view class="text-align order-padding" @click="onOrderRedirection(3)">
						<image src="@/static/icons/wdmd.png" class="order-icon margin-bottom-24" mode="widthFix">
						</image>
						<view class="font-weight-400 size-30">代金券</view>
					</view>
				</view>
			</view>
			<!-- 功能 -->
			<view class="function f-background border-radius20 margin-bottom-20">
				<!-- 				<view class="ction dis-cen border-bottom">
									<view class="fun-cen dis-ali">
										<view class="fun-img dis">
											<image class="fun-icons" src="@/static/icons/yqhys.png" mode="widthFix"></image>
										</view>
										<text class="font-weight-600 color3 size-30">邀请好友</text>
									</view>
									<text class="iconfont icon-right-1-copy size-24"></text>
								</view> -->
				<!-- 				<view class="ction dis-cen border-bottom" @click="onJumpPage('joinGroup')">
					<view class="fun-cen dis-ali">
						<view class="fun-img dis">
							<image class="fun-icon" src="@/static/icons/jqlq.png" mode="widthFix"></image>
						</view>
						<text class="font-weight-600 color3 size-30">进群领券</text>
					</view>
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view> -->
				<!-- 				<view class="ction dis-cen border-bottom" @click="onJumpPage('addressList','type',1)">
					<view class="fun-cen dis-ali">
						<image class="fun-img" src="@/static/icons/shdz.png" mode="widthFix"></image>
						<text class="font-weight-600 color3 size-30">收货地址</text>
					</view>
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view> -->
				<view class="ction dis-cen border-bottom por">
					<button class="button poa app-bottom-left width-height100" open-type="share"></button>
					<view class="fun-cen dis-ali">
						<view class="fun-img dis">
							<image class="fun-icons" src="@/static/icons/yqhys.png" mode="widthFix"></image>
						</view>
						<text class=" color3 size-30">邀请好友</text>
					</view>
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view>
				<view class="ction dis-cen border-bottom" @click="onJumpPage('aboutUs')">
					<view class="fun-cen dis-ali">
						<view class="fun-img dis">
							<image class="fun-icons" src="@/static/icons/gywm.png" mode="widthFix"></image>
						</view>
						<text class=" color3 size-30">关于我们</text>
					</view>
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view>
				<view class="ction dis-cen border-bottom" @click="onJumpPage('contactUs')">
					<view class="fun-cen dis-ali">
						<image class="fun-img" src="@/static/icons/lxwm.png" mode="widthFix"></image>
						<text class=" color3 size-30">联系客服</text>
					</view>
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view>
			</view>
			<!-- 申请入驻 -->
			<view class="por">
				<swiper class="apply" circular autoplay interval="3000"
					@change="$event => current=$event.detail.current">
					<swiper-item v-for="(item,index) in infoMain" :key="index"
						@click="onJumpPage(item.status == -1 ? 'applyJoin' : 'auditStatus','type',item.status == -1 ? item.type : item.id)">
						<image :src="item.img" class="width-height100" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="apply-drop poa dis">
					<view class="drop" :class="{'drop-x' : indx == current}" v-for="(items,indx) in infoMain"
						:key="indx"></view>
				</view>
			</view>
		</view>

		<!-- </scroll-view> -->
	</view>
</template>

<script>
	const url = {
		infoSetup: '/packagePerson/info-setup/info-setup', // 设置
		addressList: '/packagePerson/address/edit-address', // 地址
		beansList: '/packagePerson/convenient-beans/beans-list', // 便利豆
		joinGroup: '/packagePerson/join-group/join-group?type=1', // 进群领券
		contactUs: '/packagePerson/contact-us/contact-us', // 联系我们
		applyJoin: '/packagePerson/apply-join/apply-join', // 入驻信息
		auditStatus: '/packagePerson/audit-status/audit-status', // 审核状态
		logon: '/packagePerson/logon/logon', // 登录
		aboutUs: '/packagePerson/about-us/about-us', // 关于我们
	}
	import { appId } from "@/utils/public"
	import { UserInfo, GetMainImgs, OnlineStatic } from "@/api/index"
	export default {
		data() {
			return {
				OnlineStatic,
				infoMain: [],
				current: 0,
				scrollTop: false,
				refresherTriggered: false,
				tokenBool: '',
				userInfo: {}
			}
		},
		onShareAppMessage(res) {
			let userInfo = this.userInfo
			return {
				title: '代取快递丨买商品丨免费跑腿', //
				path: `/pages/pages/index?superiorId=${userInfo.uid}`, //
				imageUrl: '../../static/img/fx.png',
				mpId: appId, //此处配置微信小程序的AppId
			};
		},
		onShow() {
			this.tokenBool = uni.getStorageSync('userInfo').mobile
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				const { code, data } = await UserInfo()
				if (code == '200') {
					console.log('data', data)
					this.userInfo = data
					this.getGetMainImgs()
					uni.setStorageSync('userInfo', data)
				}
			},
			// 获取审核轮播
			async getGetMainImgs() {
				const { code, data } = await GetMainImgs()
				console.log(data)
				if (code == '200') {
					this.infoMain = data
				}
			},
			onScrollTop() {
				this.scrollTop = false
			},
			// 设置下拉刷新
			dropdownRefresh() {
				this.scrollTop = true
				this.refresherTriggered = true
			},
			onRefresherrefresh() {
				const _this = this
				setTimeout(() => {
					_this.refresherTriggered = false
				}, 1000)
			},
			onOrderRedirection(index) {
				// console.log('this.tokenBool',this.tokenBool)
				if (!this.tokenBool) { // 未登录
					this.onJumpPage('logon')
					return
				}
				uni.setStorageSync('orderIndex', index)
				uni.switchTab({
					url: '/pages/order-list/order-list'
				});
			},
			onJumpPage(name, parName, par) {
				if (!this.tokenBool) name = 'logon'
				let urlData = url[name]
				if (par) urlData = `${urlData}?${parName}=${par}` // 有参数
				uni.navigateTo({
					url: urlData
				});
			}
		}
	}
</script>

<style lang="scss">
	.Personal {

		// 背景内容
		// .personal-back {
		// 	width: 100%;
		// 	min-height: 100vh;
		// 	background: #ffffff;

		// 	.back-img {
		// 		width: 100%;
		// 		height: 408rpx;
		// 	}
		// }
		.apply {
			width: 100%;
			height: 176rpx;
		}

		.apply-drop {
			width: 100%;
			left: 0;
			bottom: 8rpx;

			.drop {
				width: 10rpx;
				height: 10rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				margin: 8rpx;
			}

			.drop-x {
				background: #854C4C !important;
			}
		}

		.back-img {
			width: 100%;
			height: 408rpx;
		}

		.scroll-view {
			width: 100vw;
			// left: 0;
			// top: 210rpx;
			// height: 100vh;
			transition: all 1s;
			// background: #F8F8F8;
			border-radius: 32rpx 32rpx 0 0;
			padding: 36rpx 16rpx 0;
			box-sizing: border-box;
			margin-top: -200rpx;

			.border-radius20 {
				border-radius: 20rpx;
			}

			.surface {
				.infos {
					padding: 0 34rpx;

					.surface-infos {
						.info-img {
							width: 104rpx;
							height: 104rpx;
							box-sizing: border-box;
							border: 2px solid #FFFFFF;
							border-radius: 100rpx;
							margin-right: 28rpx;
						}
					}

					.setup {
						width: 66rpx;
						height: 66rpx;

						.setup-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			// 统计
			.statistics {
				padding: 12rpx;
				border-radius: 20rpx;
				margin-top: 28rpx;

				.color7b {
					color: #7B2D2D;
				}

				.color84 {
					color: #843131;
				}

				.statistics-title {
					padding: 40rpx 30rpx 36rpx;
					display: grid;
					align-items: center;
					grid-gap: 26rpx;
					// grid-template-columns: 1fr 1px 1fr;
					background: linear-gradient(180deg, #FFF8F5 0%, #FFE4D4 100%);
					border-radius: 20rpx;
					.icon-right-1-copy{
						top: 2rpx;
					}
					.size-56{
						font-size: 56rpx;
					}
				}

				.tiao {
					width: 1px;
					height: 57rpx;
					background: rgba(132, 49, 49, 0.16);
				}

				.service-order {
					display: grid;
					grid-template-columns: repeat(3, 33.33%);

					.order-padding {
						padding: 44rpx 0 36rpx;
					}

					.size-26 {
						color: #444444;
					}

					.order-icon {
						width: 44rpx;
						height: 44rpx;
						margin-left: auto;
						margin-right: auto;
					}
				}
			}

			// 功能
			.function {
				padding-left: 48rpx;

				.ction {
					height: 110rpx;
					padding-right: 28rpx;

					.button {
						background: rgba(0, 0, 0, 0);
						z-index: 10;
					}

					.button::after {
						border: 0;
					}
				}

				.icon-right-1-copy {
					color: #CBCACA;
				}

				.fun-img {
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}

				.fun-icons {
					width: 40rpx;
					height: 40rpx;
				}

				.fun-icon {
					width: 36rpx;
					height: 36rpx;
				}

				// .fun-imgs{
				// 	width: 40rpx;
				// }
			}
		}

		// .scroll-top {
		// 	top: 100vh;
		// }
	}
</style>